<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<script type="text/javascript">
	(function (designW) {
		var docEl = document.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function () {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				docEl.style.fontSize = 100 * (clientWidth / designW) + 'px';
			};
		if (!document.addEventListener) return;
			recalc();
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
	})(750);
	</script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="p-wall">
<div class="wrapper">
	<a class="link my-prize"></a>
	<a class="link my-pic"></a>
	<div class="wall">
		<div class="table-wall">
			<table id="table" cellpadding="0" cellspacing="5px">
			<script id="template" type="text/template">
			<% for (var i = 0; i < list.length; i++) { %>
				<%if (i % 3 === 0) { %>
					<tr>
				<% } %>
						<td>
							<img src="<%= list[i].imgUrl%>" alt="">
							<div class="info">
								名字：<%= list[i].name %><br />
								颜值指数：<span><%= list[i].score || 0 %></span>
							</div>
						</td>
				<% if (i % 3 === 2) { %>
					</tr>
				<% } %>
			<% } %>
			</script>
			</table>
		</div>
	</div>
</div>
<script src="jq.js"></script>
<script src="underscore-min.js"></script>
<script type="text/javascript">
	var _render = function($node, data, opt) {
		$node = $($node);
		opt = _.extend({}, opt);
		var template = $.trim($node.html());
		var $dom = $(_.template(template)(data)).attr('_template-render', '_tempalte');
		switch (opt.renderMode) {
			case 'replace':
				$node.prevAll('[_template-render]').remove();
				$node.before($dom);
				break;
			case 'after':
				$node.before($dom);
				break;
			case 'before':
				$node.after($dom);
				break;
			default:
				return $dom;
				break;
		}
	};
	var page = 0;
	var loading = 0;
	var total;
	var cc = function() {
		if (loading && total >= page) {
			return;
		}
		page++;
		loading = 1;
		$.ajax({
			url: 'http://vivo.ixunlu.cn/vivo/imagelist',
			data: {
				page: page
			},
			dataType: 'jsonp',
			jsonp: 'cb',
			success: function(data) {
				loading = 0;
				var list = data.data.list;
				if (list.length < 3) {
					list = list.concat(list);
				}
				if (data)
				_render($('#template'), {list: list}, {
					renderMode: 'after'
				});
			}
		});
	};
	cc();
	var $theTable = $('#table');
	var twh = $('.table-wall').height();
	$('.table-wall').scroll(function() {
		if ($theTable.height() - ($(this).scrollTop() + twh) < 10) {
			cc();
		}
	});
</script>
</body>
</html>